/**
 * React 中的条件渲染如何玩：
 *  1. 通过 三元表达式 来处理
 *  2. && 运算符
 */
import React from "react";

class App extends React.Component {
  state = {
    isLogin: false,
    showModal: false,
  };

  renderModal() {
    if (this.state.showModal) {
      return <div></div>;
    } else {
      return null;
    }

    // return (
    //   this.state.showModal && (
    //     <div
    //       className="modal"
    //       style={{
    //         width: 100,
    //         height: 100,
    //         backgroundColor: "red",
    //         position: "fixed",
    //         top: "50%",
    //         left: "50%",
    //         transform: "translate(-50%, -50%)",
    //       }}
    //     ></div>
    //   )
    // );
  }

  render() {
    return (
      <div>
        <h1>App</h1>

        {this.state.isLogin ? <div>欢迎你，xxx</div> : <div>请登录</div>}

        {/* {this.renderModal()} */}

        {this.state.showModal ? (
          <div
            className="modal"
            style={{
              width: 100,
              height: 100,
              backgroundColor: "red",
              position: "fixed",
              top: "50%",
              left: "50%",
              transform: "translate(-50%, -50%)",
            }}
          ></div>
        ) : null}
      </div>
    );
  }
}

export default App;
